<template>
    <div id="forget">
        <div id="title">
            <span>小学入学服务系统</span>
        </div>
        <div id="caozuo">
            <span>系统操作说明:</span>
            <p>1.注册账号:注册时,需如实填写本人相关的信息,当注册成功后,注册所用部分信息将被自动填入信息采集表,且不可更改。</p>
            <p>2.忘记密码:修改密码时,请输入注册时输入的安全码,当安全码正确后,可修改密码。</p>
        </div>
        <div id="container">
            <div id="ctitle">
                <span>忘记密码</span>
            </div>
            <div id="main">
                <div id="shuju">
                    <span id='jieshao'>儿童证件号码:</span>
                    <input type="text" v-model="ucid" placeholder="请输入儿童身份证号">
                    <p id="cidps"></p>
                </div>
                <div id="shuju">
                    <span id='jieshao'>新登录密码:</span>
                    <input type="text" v-model="upwd" placeholder="请输入登陆密码">
                    <p id="pwdps">密码支持数字,大小写字母</p>
                </div>
                <div id="shuju">
                    <span id='jieshao'>重复密码:</span>
                    <input type="text" v-model="upwdcf" placeholder="请再次输入登录密码">
                    <p id="pwdcfps"></p>
                </div>
                <div id="shuju" style="margin-bottom:5vw">
                    <span id='jieshao'>安全码:</span>
                    <input type="text" v-model="uaqm" placeholder="请输入安全码">
                    <p id="aqmps"></p>
                </div>
                <button id='forgetbtn' @click="forgetbtn">修改</button>
                <van-popup v-model="xiugai" id='tishi'>
                    <div>
                        <p>修改成功,点击确定去登录</p>
                        <button @click="close('gb1')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="zjhbzq" id='tishi'>
                    <div>
                        <p>身份证格式不正确,请重新输入</p>
                        <button @click="close('gb2')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="mmbzq" id='tishi'>
                    <div>
                        <p>密码格式有误,请重新输入</p>
                        <button @click="close('gb3')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="cfmmbzq" id='tishi'>
                    <div>
                        <p>两次输入密码不一致,请重新输入</p>
                        <button @click="close('gb4')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="aqmbzq" id='tishi'>
                    <div>
                        <p>安全码格式有误,请重新输入</p>
                        <button @click="close('gb5')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="zjhcf" id='tishi'>
                    <div>
                        <p>该证件号不存在</p>
                        <button @click="close('gb6')">确定</button>
                    </div>
                </van-popup>
                <van-popup v-model="aqmbd" id='tishi'>
                    <div>
                        <p>该证件号对应的安全码不正确</p>
                        <button @click="close('gb7')">确定</button>
                    </div>
                </van-popup>
                <div id="nav">
                    <router-link to='/login'>登录</router-link>丨
                    <router-link to=''>忘记密码</router-link>丨
                    <router-link to='/reg'>注册</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            ucid:'',
            upwd:'',
            upwdcf:'',
            uaqm:'',
            ucidpd:false,
            upwdpd:false,
            upwdcfpd:false,
            uaqmpd:false,
            xiugai:false,
            zjhbzq:false,
            mmbzq:false,
            cfmmbzq:false,
            aqmbzq:false,
            zjhcf:false,
            aqmbd:false,
        }
    },
    methods:{
        forgetbtn(){
            if(this.ucidpd==false){
                this.ucid='';
                this.zjhbzq=true;
            }else if(this.upwdpd==false){
                this.upwd='';
                this.mmbzq=true;
                this.upwdcf='';
            }else if(this.upwdcfpd==false){
                this.upwdcf='';
                this.cfmmbzq=true;
            }else if(this.uaqmpd==false){
                this.uaqm='';
                this.aqmbzq=true;
            }else{
                this.axios.get(`/userforget?ucid=${this.ucid}&upwd=${this.upwd}&uaqm=${this.uaqm}`).then((result)=>{
                // console.log(result)
                // console.log(result.data.code);
                if(result.data.code==200){
                    this.xiugai=true;
                }else if(result.data.code==400){
                    this.zjhcf=true;
                }else if(result.data.code==401){
                    this.aqmbd=true;
                }
                });
            }
        },
        close(e){
            if(e=='gb1'){
                this.xiugai=false;
                this.$router.push('/login');
            }else if(e=='gb2'){
                this.zjhbzq=false;
            }else if(e=='gb3'){
                this.mmbzq=false;
            }else if(e=='gb4'){
                this.cfmmbzq=false;
            }else if(e=='gb5'){
                this.aqmbzq=false;
            }else if(e=='gb6'){
                this.zjhcf=false;
            }else if(e=='gb7'){
                this.aqmbd=false;
            }
        }
    },
    watch:{
        ucid(nawval){
            var rst=/^[1-9]\d{5}(201(5|4)){1}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/i;
            var res=rst.test(nawval);
            var cidps=document.getElementById('cidps');
            if(res==false){
                cidps.innerHTML="身份证格式不正确";
                cidps.style.color='red'
                this.ucidpd=false;
            }else{
                cidps.innerHTML="身份证格式正确"
                cidps.style.color='yellowgreen'
                this.ucidpd=true;
            }
        },
        upwd(nawval){
            var rst=/^[A-Z a-z 0-9]{6,14}$/g;
            var res=rst.test(nawval);
            var pwdps=document.getElementById('pwdps');
            if(res==true){
                pwdps.innerHTML="密码格式正确"
                pwdps.style.color="yellowgreen"
                this.upwdpd=true;
            }else if(nawval==''){
                pwdps.innerHTML="密码支持数字,大小写字母"
                pwdps.style.color="black"
            }else{
                pwdps.innerHTML="密码格式不规范";
                pwdps.style.color='red'
                this.upwdpd=false;
            }
            if(nawval != this.upwdcf){
                this.upwdcfpd=false;
                pwdcfps.innerHTML="两次输入的密码不一样";
                pwdcfps.style.color='red'
            }else if(nawval == this.upwdcf){
                pwdcfps.innerHTML="两次密码一致"
                pwdcfps.style.color='yellowgreen'
                this.upwdcfpd=true;
            }
        },
        upwdcf(nawval){
            var pwdcfps=document.getElementById('pwdcfps');
            if(nawval!=this.upwd){
                pwdcfps.innerHTML="两次输入的密码不一样";
                pwdcfps.style.color='red'
                this.upwdcfpd=false;
            }else{
                pwdcfps.innerHTML="密码正确"
                pwdcfps.style.color='yellowgreen'
                this.upwdcfpd=true;
            }
        },
        uaqm(nawval){
            var rst=/^\d{6}$/i;
            var res=rst.test(nawval);
            var aqmps=document.getElementById('aqmps');
            if(res==false){
                aqmps.innerHTML="安全码格式不正确";
                aqmps.style.color='red'
                this.uaqmpd=false;
            }else{
                aqmps.innerHTML="安全码格式正确"
                aqmps.style.color='yellowgreen'
                this.uaqmpd=true;
            }
        },
        xiugai(nawval){
            if(nawval==false){
                this.$router.push('/login')
            }
        }
    },
    mounted(){
        var islogin=window.sessionStorage.getItem('islogin');
        console.log(!islogin)
        if(islogin && islogin!='false'){
            this.$router.push('/message')
        }
    }
}
</script>
<style scoped>
*{
    margin: 0;
    padding:0;
}
#forget{
    width:90%;
    margin-left: 5%;
}
#title{
    color: #bc272e;
    font-size: 9vw;
    text-align: center;
    padding: 10vw 0;
    border-bottom: 0.1vw solid grey;
}
#caozuo{
    padding: 5vw 0;
}
#caozuo>span{
    /* margin: 5vw 0; */
    font-size: 5vw;
    color: #bc272e;
}
#caozuo>p{
    margin-top: 5vw;
    font-size: 4vw;
    line-height: 7vw;
}
#ctitle{
    font-size: 7vw;
    margin-bottom: 5vw;
}
#ctitle>span{
    border-bottom:1vw solid orange;
    padding-bottom: 2vw;
}

#shuju,#xingbie{
    /* text-align: center; */
    margin-top:4vw;
}
#jieshao{
    text-align: right;
    display: inline-block;
    width: 35%;
    font-size: 4vw;
}
#shuju>input{
    margin-left: 3vw;
    width:50%;
    height: 6vw;
    border: 0.1vw solid black;
}
#xingbie>input{
    margin-left: 3vw;
    width: 4.7vw;
    height: 4.8vw;
}
#shuju>p,#xingbie>p{
    text-align: right;
    height: 3vw;
    width: 90%;
    font-size: 3vw;
}
#forgetbtn{
    height: 12vw;
    width: 100%;
    border:none;
    border-radius: 5vw;
    background-color: #bc272e;
    color: white;
    font-size: 6vw
}
#nav{
    display: flex;
    justify-content: center;
}
#nav>a:nth-child(2){
    color: grey;
}
#nav>a{
    color: red;
}
#tishi{
    width: 90%;
    height: 20%;
    text-align: center;
    border-radius: 5vw;
}
#tishi>div{
    height: 100%;
}
#tishi>div>p{
    margin-left: 10%;
    width: 80%;
    line-height: 400%;
    font-size: 5vw;
    border-bottom: 0.1vw solid grey;
}
#tishi>div>button{
    width: 80%;
    height: 35%;
    border: none;
    background-color: white;
}
</style>